import { useState } from 'react';
import './PsychologicalAssessment.css';
import SymptomCheckMethod from './SymptomCheckMethod';

const PsychologicalAssessment = () => {
  // 状态变量，用于控制显示哪个页面组件
  const [showMethodPage, setShowMethodPage] = useState(false);
  
  // 开始使用按钮点击处理函数
  const handleStart = () => {
    // 点击按钮后显示检查方式选择页面
    setShowMethodPage(true);
    console.log('开始心理评估，显示检查方式选择页面');
  };

  // 这里使用导入的SymptomCheckMethod组件

  // 根据状态显示不同页面
  return (
    // 根据showMethodPage状态决定显示哪个页面
    showMethodPage ? (
      // 显示症状检查方式选择页面
      <SymptomCheckMethod />
    ) : (
      // 显示首页 - 整体页面容器
      <div className="assessment-container">
        {/* 顶部状态栏区域 - 显示时间和信号图标 */}
        <div className="status-bar">
          <span className="time">9:41</span>
          <div className="icons">
            <span className="signal">●●●●</span>
            <span className="wifi">●</span>
            <span className="battery">●</span>
          </div>
        </div>
        
        {/* 主要内容区域 - 包含图像、标题和按钮 */}
        <div className="content">
          {/* 插图区域 - 伞女孩形象通过CSS背景添加 */}
          <div className="illustration">
            {/* 图片通过CSS背景引入umbrella-illustration.svg */}
          </div>
          
          {/* 标题区域 - AI心理健康评估 */}
          <h1 className="title">AI心理疾病症状检查</h1>
          
          {/* 描述文本 - 专业服务介绍 */}
          <p className="description">
            通过我们筛选的心理健康心理学硕士，
            让您的思想保持健康，成为一个更健康的人。
          </p>
          
          {/* 开始使用按钮 - 带箭头指示用户行动 */}
          <button className="start-button" onClick={handleStart}>
            开始使用 <span className="arrow">→</span>
          </button>
        </div>
      </div>
    )
  );
};

export default PsychologicalAssessment; 